import { useState, useMemo, memo } from 'react';

const ChildA1 = () => {
	console.log('render', 'ChildA1', 'useMemo 外层', 1);
	return useMemo(() => {
        console.log('render', 'ChildA1', 'useMemo 里层', 2);
        return (<div className="note-demo-child-box">ChildA1 区域</div>)
    }, []);
}
const ChildA2 = (props) => {
	console.log('render', 'ChildA2', 'useMemo 外层', 1);
	return useMemo(() => {
        console.log('render', 'ChildA2', 'useMemo 里层', 2, '依赖prpps.countA,所以会重新渲染');
        return (<div className="note-demo-child-box">ChildA2 区域:{props.countA}</div>)
    }, [props.countA]);
}
const ChildA3 = memo(() => {
	console.log('render', 'ChildA3');
	return (<div className="note-demo-child-box">ChildA3 区域</div>)
})

const Demo = () => {
	const [countA, setCountA] = useState(11);
	
	const fn = () => {
		console.log('点击事件', '父组件 Home2 变量 countA 被重新赋值', '所有子组件全部重新渲染');
		setCountA(countA + 1);
	}
	console.log('render', 'Home2', '--------------------');
	return (
		<div className="note-example-box">
			<div className="note-example-intro">该[主组件]重新渲染时,[子组件][不会]全部重新渲染。</div>
			<div className="note-demo-parent-box">
				<button onClick={fn}>countA:{countA}</button>
				<ChildA1></ChildA1>
				<ChildA2 countA={countA}></ChildA2>
				<ChildA3></ChildA3>
			</div>
			<div className="note-code-case">
				<textarea defaultValue={codeVal1} style={{height: '480px'}}></textarea>
				<textarea defaultValue={codeVal2} style={{height: '420px'}}></textarea>
			</div>
		</div>
	);
};

const codeVal1 = `父组件 Demo02.jsx
const Demo = () => {
	const [countA, setCountA] = useState(11);
	
	const fn = () => {
		console.log('点击事件', '父组件 Home2 变量 countA 被重新赋值', '所有子组件全部重新渲染');
		setCountA(countA + 1);
	}
	console.log('render', 'Home2', '--------------------');
	return (
		<div className="note-example-box">
			<div className="note-demo-parent-box">
				<button onClick={fn}>countA:{countA}</button>
				<ChildA1></ChildA1>
				<ChildA2 countA={countA}></ChildA2>
				<ChildA3></ChildA3>
			</div>
		</div>
	);
};`;
const codeVal2 = `子组件群
const ChildA1 = () => {
	console.log('render', 'ChildA1', 'useMemo 外层', 1);
	return useMemo(() => {
        console.log('render', 'ChildA1', 'useMemo 里层', 2);
        return (<div className="note-demo-child-box">ChildA1 区域</div>)
    }, []);
}
const ChildA2 = (props) => {
	console.log('render', 'ChildA2', 'useMemo 外层', 1);
	return useMemo(() => {
        console.log('render', 'ChildA2', 'useMemo 里层', 2, '依赖prpps.countA,所以会重新渲染');
        return (<div className="note-demo-child-box">ChildA2 区域:{props.countA}</div>)
    }, [props.countA]);
}
const ChildA3 = memo(() => {
	console.log('render', 'ChildA3');
	return (<div className="note-demo-child-box">ChildA3 区域</div>)
})`;


export default Demo;